<template>
  <div class="scriptModal">
    <j-modal destroyOnClose :visible="scriptModal" :width="1000" title="脚本管理" @ok="handleOk" @cancel="handleCancel">
      <div style="display:flex;">
        <div class="left">
          <video controls :src="videoSrc" autoplay style="width: 400px;height: 250px;"></video>
          <div style="height: 450px;overflow-y:scroll;">
            <div v-for="(item, index) in videoScriptItems" :key="index">
              <div :class="['scriptItem', index === initIndex ? 'scriptItemActive' : '']" @click="changeScript(index)">
                <span style="color: #3399ff;padding-right: 6px;"
                  >{{ item.model === 1 ? '[提问问题]' : '[知识点]' }}
                </span>
                {{ item.numberOfSeconds }}"
              </div>
            </div>
            <div class="addScript" @click="addScript()"><a-icon type="plus-circle" /><span> 添加脚本</span></div>
          </div>
        </div>
        <div class="right">
          <div class="delete" @click="deleteScript()">
            <div><a-icon type="delete" /> 删除</div>
          </div>
          <template v-if="videoScriptItems.length > 0">
            <div class="setting">
              <div class="item">
                <div><a-icon type="history" /> 秒数:</div>
                <div style="padding-left: 10px">
                  第 <a-input-number v-model="videoScriptItems[initIndex].numberOfSeconds" :min="1" /> 秒执行
                </div>
              </div>
              <div class="item">
                <div><a-icon type="apartment" /> 模式:</div>
                <div style="padding-left: 10px">
                  <a-radio-group name="radioGroup" v-model="videoScriptItems[initIndex].model" :default-value="1">
                    <a-radio :value="1">
                      提问问题
                    </a-radio>
                    <a-radio :value="2">
                      知识点
                    </a-radio>
                  </a-radio-group>
                </div>
              </div>
              <div class="lastItem">
                <div><a-icon type="edit" /> 标题:</div>
                <div style="padding-left: 10px;flex: 1;">
                  <a-textarea v-model="videoScriptItems[initIndex].title" style="width: 100%;" />
                </div>
              </div>
            </div>
            <!-- 具体内容 -->
            <template v-if="videoScriptItems[initIndex].model === 1">
              <div class="setting">
                <div v-for="(item2, index2) in videoScriptItems[initIndex].options" class="item" :key="index2">
                  <a-input v-model="item2.prefix" placeholder="" style="width: 3em;margin-right: 10px;" />
                  <a-input v-model="item2.content" placeholder="请输入选项" style="margin-right: 10px;" />
                  <span style="width: 5em;">跳到</span
                  ><a-input-number v-model="item2.jump" :min="videoScriptItems[initIndex].numberOfSeconds" style="width: 9em;" />
                  <span style="padding-left: 10px;width: 8em;">秒执行</span>
                  <div
                    style="padding-left: 10px;width: 8em;  color: #5fa9fe;cursor: pointer;"
                    @click="deleteOption(index2)"
                  >
                    <a-icon type="delete" /> 删除
                  </div>
                </div>
                <div class="addScript" @click="addOption()"><a-icon type="plus-circle" /><span> 添加选项</span></div>
              </div>
            </template>
            <template v-else>
              <wangEditor
                :htmlTwo="htmlTwo"
                @contentChange = "contentChange"
              ></wangEditor>
            </template>
          </template>
        </div>
      </div>
    </j-modal>
  </div>
</template>

<script>
import wangEditor from '@/components/wangEditor/wangEditor.vue'
export default {
  props: {
    scriptModal: {
      type: Boolean,
      default: false
    },
    videoSrc: {
      type: String,
      require: true
    },
    videoScriptItems: {
      type: Array,
      default: []
    }
  },
  components: {
    wangEditor
  },
  data() {
    return {
      initIndex: 0,
      htmlTwo: ''
    }
  },
  methods: {
    contentChange(val){
     this.videoScriptItems[this.initIndex].content = val
    },
    handleOk() {
      this.initIndex = 0;
      this.$emit('ok')
    },
    addScript() {
      const video = document.querySelector('video')
      const seconds = Math.floor(video.currentTime)
      this.videoScriptItems.push({
        id: null,
        numberOfSeconds: seconds,
        model: 1,
        title: '',
        content: '',
        options: [
          {
            prefix: 'A',
            content: null,
            jump: seconds
          },
          {
            prefix: 'B',
            content: null,
            jump: seconds
          },
          {
            prefix: 'C',
            content: null,
            jump: seconds
          },
          {
            prefix: 'D',
            content: null,
            jump: seconds
          }
        ]
      })
      this.initIndex = this.videoScriptItems.length - 1
    },
    addOption() {
      const lastLabel = this.videoScriptItems[this.initIndex].options[
        this.videoScriptItems[this.initIndex].options.length - 1
      ].prefix
      const nextLabel = String.fromCharCode(lastLabel.charCodeAt() + 1)
      this.videoScriptItems[this.initIndex].options.push({
        prefix: nextLabel,
        content: '',
        jump: this.videoScriptItems[this.initIndex].numberOfSeconds
      })
    },
    deleteScript() {
      this.videoScriptItems.splice(this.initIndex, 1)
      if (this.initIndex === this.videoScriptItems.length) {
        this.initIndex--
      } else {
        this.initIndex = this.initIndex
      }
    },
    deleteOption(index) {
      this.videoScriptItems[this.initIndex].options.splice(index, 1)
    },
    changeScript(index) {
      this.initIndex = index;
      this.htmlTwo = this.videoScriptItems[index].content ? this.videoScriptItems[index].content : '';
      console.log(this.htmlTwo)
    },
    handleCancel() {
      this.initIndex = 0
      this.$emit('cancel')
    }
  },
  mounted(){
    if(this.videoScriptItems[this.initIndex]){
    this.htmlTwo = this.videoScriptItems[this.initIndex].content ? this.videoScriptItems[this.initIndex].content : '';
    }else {
        this.htmlTwo = ''
    }

  }
}
</script>

<style scoped lang="less">
::v-deep .ant-modal-body {
  height: 700px;
  overflow-y: scroll;
  padding: 0px;
}
.addScript {
  text-align: center;
  color: #5fa9fe;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  &:hover {
    background-color: #e5f0f8;
  }
}
.scriptItem {
  position: relative;
  height: 40px;
  line-height: 40px;
  padding-left: 25px;
  cursor: pointer;
  &:hover {
    background-color: #e5f0f8;
  }
}
.scriptItemActive {
  background-color: #e5f0f8;
}
.scriptItemActive::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background-color: #3399ff;
}
.right {
  width: 600px;
  padding: 20px;
  font-size: 16px;
  .delete {
    color: #5fa9fe;
    display: flex;
    justify-content: flex-end;
    div {
      cursor: pointer;
    }
  }
  .setting {
    border: 1px solid #eee;
    margin-top: 10px;
    .item {
      border-bottom: 1px solid #eee;
      padding: 15px;
      display: flex;
      align-items: center;
    }
    .lastItem {
      padding: 15px;
      display: flex;
      align-items: center;
    }
  }
}
</style>
